Performance Timeline API๋ก ์ต์ ์ ์น ์ฑ๋ฅ์ ๋น๋ฐ์ ํํค์ณ ๋ณด์ธ์. ๋ ๋น ๋ฅด๊ณ ์ํํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ํต์ฌ ์งํ๋ฅผ ์์ง, ๋ถ์, ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ์ธ์.
์ฑ๋ฅ ํ์๋ผ์ธ: ์งํ ์์ง์ ์ํ ์ข ํฉ ๊ฐ์ด๋
์ค๋๋ ๋น ๋ฅด๊ฒ ๋ณํํ๋ ๋์งํธ ์ธ์์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์ฌ์ฉ์๋ค์ ์น์ฌ์ดํธ๊ฐ ๋น ๋ฅด๊ฒ ๋ก๋ฉ๋๊ณ ์ฆ๊ฐ์ ์ผ๋ก ๋ฐ์ํ๊ธฐ๋ฅผ ๊ธฐ๋ํฉ๋๋ค. ๋๋ฆฐ ์น์ฌ์ดํธ๋ ๋ถ๋ง, ์ธ์ ์ดํ, ๊ทธ๋ฆฌ๊ณ ๊ถ๊ทน์ ์ผ๋ก๋ ์์ต ์์ค๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋คํํ๋, ์ต์ ์น ๋ธ๋ผ์ฐ์ ๋ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ธก์ ํ๊ณ ๋ถ์ํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด ๋๊ตฌ๋ค ์ค ๊ฐ์ฅ ๊ฐ์น ์๋ ๊ฒ ์ค ํ๋๊ฐ ๋ฐ๋ก Performance Timeline API์ ๋๋ค.
์ด ์ข ํฉ ๊ฐ์ด๋์์๋ Performance Timeline API์ ๊ธฐ๋ณธ ๊ฐ๋ ๋ถํฐ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๊ณ ๋ถ์ํ๋ ๊ณ ๊ธ ๊ธฐ์ ๊น์ง ๋ชจ๋ ๊ฒ์ ์์ธํ ๋ค๋ฃฐ ๊ฒ์ ๋๋ค. ๋ค์ํ ์ฑ๋ฅ ํญ๋ชฉ ์ ํ์ ์ดํด๋ณด๊ณ , API๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์ฐํ๋ฉฐ, ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐ ๋์์ด ๋๋ ์ค์ฉ์ ์ธ ์์ ๋ฅผ ์ ๊ณตํ ๊ฒ์ ๋๋ค.
Performance Timeline API๋ ๋ฌด์์ธ๊ฐ?
Performance Timeline API๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์์งํ ์ฑ๋ฅ ๊ด๋ จ ๋ฐ์ดํฐ์ ์ ๊ทผํ ์ ์๋๋ก ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ธํฐํ์ด์ค ์งํฉ์ ๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋ค์๊ณผ ๊ฐ์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ค์ํ ์ธก๋ฉด์ ์ธก์ ํ ์ ์์ต๋๋ค:
- ํ์ด์ง ๋ก๋ ์๊ฐ
- ๋ฆฌ์์ค ๋ก๋ฉ ์๊ฐ (์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ, ์คํ์ผ์ํธ)
- ์ฌ์ฉ์ ํ์ด๋ฐ ์ธก์
- ํ๋ ์ ์๋ ๋ฐ ๋ ๋๋ง ์ฑ๋ฅ
- ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋
์ด ๋ฐ์ดํฐ๋ฅผ ์์งํ๊ณ ๋ถ์ํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํ ์ต์ ํ๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค. ์ด API๋ ์ฑ๋ฅ ๋ฐ์ดํฐ์ ์ ๊ทผํ๋ ํ์คํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ๋ฅผ ๋ ์ฝ๊ฒ ๊ตฌ์ถํ ์ ์๋๋ก ํฉ๋๋ค.
์ฃผ์ ๊ฐ๋ ๋ฐ ์ธํฐํ์ด์ค
Performance Timeline API๋ ๋ช ๊ฐ์ง ์ฃผ์ ๊ฐ๋ ๊ณผ ์ธํฐํ์ด์ค๋ฅผ ์ค์ฌ์ผ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค:
- Performance Timeline: ์นํ์ด์ง์ ์๋ช ์ฃผ๊ธฐ ๋์ ๋ฐ์ํ ์ฑ๋ฅ ์ด๋ฒคํธ์ ํ์๋ผ์ธ์ ๋ํ๋ ๋๋ค. ์ฑ๋ฅ ๋ฐ์ดํฐ์ ์ ๊ทผํ๋ ์ค์ฌ์ ์ ๋๋ค.
- Performance Entry: ๋ฆฌ์์ค ๋ก๋ฉ ์ด๋ฒคํธ๋ ์ฌ์ฉ์ ์ ์ ํ์ด๋ฐ ์ธก์ ๊ณผ ๊ฐ์ ๋จ์ผ ์ฑ๋ฅ ์ด๋ฒคํธ๋ฅผ ๋ํ๋ ๋๋ค.
- Performance Observer: ๊ฐ๋ฐ์๊ฐ Performance Timeline์์ ์๋ก์ด ์ฑ๋ฅ ํญ๋ชฉ์ ๋ชจ๋ํฐ๋งํ๊ณ ์ค์๊ฐ์ผ๋ก ์๋ตํ ์ ์๋๋ก ํฉ๋๋ค.
- `performance` ๊ฐ์ฒด: Performance Timeline ๋ฐ ๊ด๋ จ ๋ฉ์๋์ ๋ํ ์ ๊ทผ์ ์ ๊ณตํ๋ ์ ์ญ ๊ฐ์ฒด(`window.performance`)์ ๋๋ค.
`performance` ๊ฐ์ฒด
`performance` ๊ฐ์ฒด๋ Performance Timeline API์ ์ํธ์์ฉํ๋ ์์์ ์ ๋๋ค. ์ฑ๋ฅ ํญ๋ชฉ ๊ฒ์, ํ์๋ผ์ธ ์ง์ฐ๊ธฐ, ์ฑ๋ฅ ๊ด์ฐฐ์ ์์ฑ ๋ฑ์ ๋ฉ์๋๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ฐ์ฅ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋ฉ์๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- `performance.getEntries()`: ํ์๋ผ์ธ์ ๋ชจ๋ ์ฑ๋ฅ ํญ๋ชฉ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค.
- `performance.getEntriesByName(name, entryType)`: ํน์ ์ด๋ฆ๊ณผ ํญ๋ชฉ ์ ํ์ ๊ฐ์ง ์ฑ๋ฅ ํญ๋ชฉ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค.
- `performance.getEntriesByType(entryType)`: ํน์ ์ ํ์ ์ฑ๋ฅ ํญ๋ชฉ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค.
- `performance.clearMarks(markName)`: ํน์ ์ด๋ฆ์ ์ฑ๋ฅ ๋งํฌ๋ฅผ ์ง์๋๋ค.
- `performance.clearMeasures(measureName)`: ํน์ ์ด๋ฆ์ ์ฑ๋ฅ ์ธก์ ๊ฐ์ ์ง์๋๋ค.
- `performance.now()`: ํ์ ์์ ์ดํ ๊ฒฝ๊ณผ๋ ์๊ฐ์ ๋ํ๋ด๋ ๊ณ ํด์๋ ํ์์คํฌํ๋ฅผ ์ผ๋ฐ์ ์ผ๋ก ๋ฐ๋ฆฌ์ด ๋จ์๋ก ๋ฐํํฉ๋๋ค. ์ด๋ ๊ธฐ๊ฐ ์ธก์ ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์ฑ๋ฅ ํญ๋ชฉ ์ ํ
Performance Timeline API๋ ๊ฐ๊ฐ ํน์ ์ ํ์ ์ฑ๋ฅ ์ด๋ฒคํธ๋ฅผ ๋ํ๋ด๋ ์ฌ๋ฌ ๊ฐ์ง ๋ค๋ฅธ ์ ํ์ ์ฑ๋ฅ ํญ๋ชฉ์ ์ ์ํฉ๋๋ค. ๊ฐ์ฅ ์ค์ํ ํญ๋ชฉ ์ ํ ์ค ์ผ๋ถ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- `navigation`: DNS ์กฐํ, TCP ์ฐ๊ฒฐ, ์์ฒญ ๋ฐ ์๋ต ์๊ฐ์ ํฌํจํ ํ์ด์ง ๋ก๋์ ๋ํ ํ์ ํ์ด๋ฐ์ ๋ํ๋ ๋๋ค.
- `resource`: ์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ ๋๋ ์คํ์ผ์ํธ์ ๊ฐ์ ํน์ ๋ฆฌ์์ค์ ๋ก๋ฉ์ ๋ํ๋ ๋๋ค.
- `mark`: ํ์๋ผ์ธ์์ ์ฌ์ฉ์๊ฐ ์ ์ํ ํ์์คํฌํ๋ฅผ ๋ํ๋ ๋๋ค.
- `measure`: ๋ ๋งํฌ ์ฌ์ด์์ ๊ณ์ฐ๋, ํ์๋ผ์ธ์์ ์ฌ์ฉ์๊ฐ ์ ์ํ ๊ธฐ๊ฐ์ ๋ํ๋ ๋๋ค.
- `paint`: ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฉด์ ์ฒซ ์ฝํ ์ธ ๋ฅผ ๊ทธ๋ฆฌ๋ ์๊ฐ(First Paint)๊ณผ ์ฒซ ์๋ฏธ ์๋ ์ฝํ ์ธ ๋ฅผ ๊ทธ๋ฆฌ๋ ์๊ฐ(First Contentful Paint)์ ๋ํ๋ ๋๋ค.
- `longtask`: ์ฅ์๊ฐ(์ผ๋ฐ์ ์ผ๋ก 50ms ์ด์) ๋์ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ฌ UI ๋ฒ๋ฒ ๊ฑฐ๋ฆผ์ ์ ๋ฐํ ์ ์๋ ์์ ์ ๋ํ๋ ๋๋ค.
- `event`: ๋ง์ฐ์ค ํด๋ฆญ์ด๋ ํค ์ ๋ ฅ๊ณผ ๊ฐ์ ๋ธ๋ผ์ฐ์ ์ด๋ฒคํธ๋ฅผ ๋ํ๋ ๋๋ค.
- `layout-shift`: ์ฌ์ฉ์ ๊ฒฝํ์ ๋ฐฉํดํ ์ ์๋ ์๊ธฐ์น ์์ ํ์ด์ง ๋ ์ด์์ ๋ณ๊ฒฝ(Cumulative Layout Shift)์ ๋ํ๋ ๋๋ค.
- `largest-contentful-paint`: ๋ทฐํฌํธ์์ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์๊ฐ ํ์๋ ๋๊น์ง ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋ํ๋ ๋๋ค.
์ฑ๋ฅ ์งํ ์์งํ๊ธฐ
Performance Timeline API๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๋ ๋ฐฉ๋ฒ์๋ ์ฌ๋ฌ ๊ฐ์ง๊ฐ ์์ต๋๋ค. ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ํ์๋ผ์ธ์์ ์ง์ ํญ๋ชฉ ๊ฒ์ํ๊ธฐ: `performance.getEntries()`, `performance.getEntriesByName()` ๋๋ `performance.getEntriesByType()`์ ์ฌ์ฉํ์ฌ ํน์ ์ฑ๋ฅ ํญ๋ชฉ์ ๊ฒ์ํฉ๋๋ค.
- Performance Observer ์ฌ์ฉํ๊ธฐ: ํ์๋ผ์ธ์์ ์๋ก์ด ํญ๋ชฉ์ ๋ชจ๋ํฐ๋งํ๊ณ ์ค์๊ฐ์ผ๋ก ์๋ตํฉ๋๋ค.
์ง์ ํญ๋ชฉ ๊ฒ์ํ๊ธฐ
์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๋ ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ ํ์๋ผ์ธ์์ ์ง์ ํญ๋ชฉ์ ๊ฒ์ํ๋ ๊ฒ์ ๋๋ค. ์ด๋ ํ์ด์ง๊ฐ ๋ก๋๋ ํ๋ ์ฌ์ฉ์๊ฐ ํน์ ์์์ ์ํธ์์ฉํ ํ์ ๊ฐ์ด ํน์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ํ์ ๋ฐ์ดํฐ๋ฅผ ์์งํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
๋ค์์ ํ์๋ผ์ธ์์ ๋ชจ๋ ๋ฆฌ์์ค ํญ๋ชฉ์ ๊ฒ์ํ๋ ๋ฐฉ๋ฒ์ ์์ ๋๋ค:
const resourceEntries = performance.getEntriesByType("resource");
resourceEntries.forEach(entry => {
console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});
์ด ์ฝ๋๋ "resource" ์ ํ์ ๋ชจ๋ ํญ๋ชฉ์ ๊ฒ์ํ๊ณ ๊ฐ ๋ฆฌ์์ค์ ์ด๋ฆ๊ณผ ๊ธฐ๊ฐ์ ์ฝ์์ ๊ธฐ๋กํฉ๋๋ค.
Performance Observer ์ฌ์ฉํ๊ธฐ
Performance Observer๋ฅผ ์ฌ์ฉํ๋ฉด Performance Timeline์์ ์๋ก์ด ์ฑ๋ฅ ํญ๋ชฉ์ ๋ชจ๋ํฐ๋งํ๊ณ ์ค์๊ฐ์ผ๋ก ์๋ตํ ์ ์์ต๋๋ค. ์ด๋ ํ์๋ผ์ธ์ ๋ฐ๋ณต์ ์ผ๋ก ํด๋งํ ํ์ ์์ด ๋ฐ์ดํฐ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํด์ง ๋ ๋ฐ์ดํฐ๋ฅผ ์์งํ๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
๋ค์์ Performance Observer๋ฅผ ์ฌ์ฉํ์ฌ ์๋ก์ด ๋ฆฌ์์ค ํญ๋ชฉ์ ๋ชจ๋ํฐ๋งํ๋ ๋ฐฉ๋ฒ์ ์์ ๋๋ค:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ["resource"] });
์ด ์ฝ๋๋ "resource" ์ ํ์ ์๋ก์ด ํญ๋ชฉ์ ์์ ํ๋ Performance Observer๋ฅผ ์์ฑํฉ๋๋ค. ์๋ก์ด ๋ฆฌ์์ค ํญ๋ชฉ์ด ํ์๋ผ์ธ์ ์ถ๊ฐ๋๋ฉด ๊ด์ฐฐ์์ ์ฝ๋ฐฑ ํจ์๊ฐ ์คํ๋์ด ๋ฆฌ์์ค์ ์ด๋ฆ๊ณผ ๊ธฐ๊ฐ์ ์ฝ์์ ๊ธฐ๋กํฉ๋๋ค. `observer.observe()` ๋ฉ์๋๋ ๊ด์ฐฐ์๊ฐ ๋ชจ๋ํฐ๋งํด์ผ ํ ํญ๋ชฉ ์ ํ์ ์ง์ ํฉ๋๋ค.
์ฌ์ฉ์ ํ์ด๋ฐ ์ธก์ ํ๊ธฐ
Performance Timeline API๋ `mark` ๋ฐ `measure` ํญ๋ชฉ ์ ํ์ ์ฌ์ฉํ์ฌ ์์ ๋ง์ ๋ง์ถค ์ฑ๋ฅ ์งํ๋ฅผ ์ ์ํ ์๋ ์์ต๋๋ค. ์ด๋ ์ปดํฌ๋ํธ ๋ ๋๋ง์ด๋ ์ฌ์ฉ์ ์ ๋ ฅ ์ฒ๋ฆฌ์ ๊ฐ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ๋ถ๋ถ์ด ์คํ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
์ฌ์ฉ์ ํ์ด๋ฐ์ ์ธก์ ํ๋ ค๋ฉด ๋จผ์ ์ธก์ ํ๋ ค๋ ๊ตฌ๊ฐ์ ์์๊ณผ ๋์ ํ์ํ๊ธฐ ์ํด `mark`๋ฅผ ์์ฑํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋ ๋งํฌ ์ฌ์ด์ ๊ธฐ๊ฐ์ ๊ณ์ฐํ๊ธฐ ์ํด `measure`๋ฅผ ์์ฑํฉ๋๋ค.
๋ค์์ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํ๋ ๋ฐฉ๋ฒ์ ์์ ๋๋ค:
performance.mark("component-render-start");
// Code to render the component
performance.mark("component-render-end");
performance.measure("component-render-time", "component-render-start", "component-render-end");
const measure = performance.getEntriesByName("component-render-time", "measure")[0];
console.log(`Component render time: ${measure.duration}ms`);
์ด ์ฝ๋๋ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ์ฝ๋ ์ ํ์ `component-render-start`์ `component-render-end`๋ผ๋ ๋ ๊ฐ์ ๋งํฌ๋ฅผ ์์ฑํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ `component-render-time`์ด๋ผ๋ ์ธก์ ๊ฐ์ ๋ง๋ค์ด ๋ ๋งํฌ ์ฌ์ด์ ๊ธฐ๊ฐ์ ๊ณ์ฐํฉ๋๋ค. ๋ง์ง๋ง์ผ๋ก ํ์๋ผ์ธ์์ ์ธก์ ํญ๋ชฉ์ ๊ฒ์ํ์ฌ ๊ธฐ๊ฐ์ ์ฝ์์ ๊ธฐ๋กํฉ๋๋ค.
์ฑ๋ฅ ์งํ ๋ถ์ํ๊ธฐ
์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๋ค๋ฉด, ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์ต์ ํ๋ฅผ ๊ตฌํํ๊ธฐ ์ํด ์ด๋ฅผ ๋ถ์ํด์ผ ํฉ๋๋ค. ์ด ๋ชฉ์ ์ ์ํด ์ฌ์ฉํ ์ ์๋ ์ฌ๋ฌ ๋๊ตฌ์ ๊ธฐ์ ์ด ์์ต๋๋ค:
- ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ: ๋๋ถ๋ถ์ ์ต์ ์น ๋ธ๋ผ์ฐ์ ๋ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์๊ฐํํ๊ณ ๋ถ์ํ ์ ์๋ ๋ด์ฅ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ๋๊ตฌ์๋ ์ผ๋ฐ์ ์ผ๋ก ์ฑ๋ฅ ์ด๋ฒคํธ์ ํ์๋ผ์ธ์ ๋ณด์ฌ์ฃผ๋ ์ฑ๋ฅ ํจ๋๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ํ๋กํ์ผ๋ง ๋ฐ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋ ๋ถ์ ๋๊ตฌ๊ฐ ํฌํจ๋ฉ๋๋ค.
- ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ: ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์ง, ๋ถ์ ๋ฐ ์๊ฐํํ๋ ๋ฐ ๋์์ด ๋๋ ๋ง์ ํ์ฌ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ๊ฐ ์์ต๋๋ค. ์ด๋ฌํ ๋๊ตฌ๋ ์ข ์ข ์ค์๊ฐ ๋ชจ๋ํฐ๋ง, ์ด์ ๊ฐ์ง, ์๋ ๋ณด๊ณ ์ ๊ฐ์ ๊ณ ๊ธ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์๋ก๋ New Relic, Datadog, Sentry๊ฐ ์์ต๋๋ค.
- ์น ๋ฐ์ดํ(Web Vitals): ๊ตฌ๊ธ์ ์น ๋ฐ์ดํ ์ด๋์ ํฐ๋ธ๋ ์ฌ์ฉ์ ๊ฒฝํ ์ธก์ ์ ํ์์ ์ธ ๊ฒ์ผ๋ก ๊ฐ์ฃผ๋๋ ์ผ๋ จ์ ์งํ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ์งํ์๋ ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(LCP), ์ต์ด ์ ๋ ฅ ์ง์ฐ(FID), ๋์ ๋ ์ด์์ ์ด๋(CLS)์ด ํฌํจ๋ฉ๋๋ค. ์ด๋ฌํ ์งํ๋ฅผ ๋ชจ๋ํฐ๋งํ๋ฉด ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ํด๊ฒฐํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ ์ฌ์ฉํ๊ธฐ
๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ์ฑ๋ฅ ๋ถ์์ ์ํ ๊ฐ๋ ฅํ๊ณ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋ ๋ฆฌ์์ค์ ๋๋ค. ๋ค์์ Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์ ์ฑ๋ฅ ํจ๋์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋๋ค (๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ๋ ์ ์ฌํ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์ต๋๋ค):
- ๊ฐ๋ฐ์ ๋๊ตฌ ์ด๊ธฐ: ์นํ์ด์ง์์ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ํด๋ฆญํ๊ณ "๊ฒ์ฌ"๋ฅผ ์ ํํ๊ฑฐ๋ F12 ํค๋ฅผ ๋๋ฆ ๋๋ค.
- ์ฑ๋ฅ ํจ๋๋ก ์ด๋: "์ฑ๋ฅ(Performance)" ํญ์ ํด๋ฆญํฉ๋๋ค.
- ๊ธฐ๋ก ์์: ๊ธฐ๋ก ๋ฒํผ(๋ณดํต ์ ๋ชจ์)์ ํด๋ฆญํ์ฌ ์ฑ๋ฅ ๋ฐ์ดํฐ ์บก์ฒ๋ฅผ ์์ํฉ๋๋ค.
- ํ์ด์ง์ ์ํธ์์ฉํ๊ธฐ: ํ์ด์ง ๋ก๋ฉ, ๋ฒํผ ํด๋ฆญ, ์คํฌ๋กค ๋ฑ ๋ถ์ํ๋ ค๋ ์์ ์ ์ํํฉ๋๋ค.
- ๊ธฐ๋ก ์ค์ง: ์ค์ง ๋ฒํผ์ ํด๋ฆญํ์ฌ ๊ธฐ๋ก์ ๋ง์นฉ๋๋ค.
- ํ์๋ผ์ธ ๋ถ์: ์ฑ๋ฅ ํจ๋์ ๋ก๋ฉ ์๊ฐ, ์๋ฐ์คํฌ๋ฆฝํธ ์คํ, ๋ ๋๋ง, ํ์ธํ ์ ํฌํจํ ์ฑ๋ฅ ์ด๋ฒคํธ์ ํ์๋ผ์ธ์ด ํ์๋ฉ๋๋ค.
ํ์๋ผ์ธ์ ๊ฐ ์ด๋ฒคํธ์ ๊ธฐ๊ฐ, ์์ ์๊ฐ, ๋ค๋ฅธ ์ด๋ฒคํธ์์ ๊ด๊ณ ๋ฑ ์์ธ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค. ํ๋ ๋ฐ ์ถ์, ์ ํ๋ณ ์ด๋ฒคํธ ํํฐ๋ง, ๊ฐ๋ณ ์ด๋ฒคํธ ๊ฒ์ฌ๋ฅผ ํตํด ๋ ๋ง์ ์ ๋ณด๋ฅผ ์ป์ ์ ์์ต๋๋ค. "Bottom-Up", "Call Tree", "Event Log" ํญ์ ๋ฐ์ดํฐ์ ๋ํ ๋ค์ํ ๊ด์ ์ ์ ๊ณตํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์ฝ๋๋ฅผ ์ต์ ํํ ์ ์๋๋ก ํฉ๋๋ค.
์น ๋ฐ์ดํ: ์ฌ์ฉ์ ๊ฒฝํ ์ธก์ ํ๊ธฐ
์น ๋ฐ์ดํ์ ์น์ฌ์ดํธ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ธก์ ํ๊ธฐ ์ํด ๊ตฌ๊ธ์ด ์ ์ํ ์ผ๋ จ์ ์งํ์ ๋๋ค. ์ด๋ฌํ ์งํ์ ์ง์คํ๋ฉด ์ฌ์ฉ์ ๋ง์กฑ๋์ SEO ์์๋ฅผ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(LCP): ๋ทฐํฌํธ์์ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์๊ฐ ํ์๋ ๋๊น์ง ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ข์ LCP ์ ์๋ 2.5์ด ์ดํ์ ๋๋ค.
- ์ต์ด ์ ๋ ฅ ์ง์ฐ(FID): ๋ธ๋ผ์ฐ์ ๊ฐ ์ฒซ ์ฌ์ฉ์ ์ํธ์์ฉ(์: ๋ฒํผ ํด๋ฆญ ๋๋ ๋งํฌ ํญ)์ ์๋ตํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ข์ FID ์ ์๋ 100๋ฐ๋ฆฌ์ด ์ดํ์ ๋๋ค.
- ๋์ ๋ ์ด์์ ์ด๋(CLS): ํ์ด์ง์์ ๋ฐ์ํ๋ ์๊ธฐ์น ์์ ๋ ์ด์์ ์ด๋์ ์์ ์ธก์ ํฉ๋๋ค. ์ข์ CLS ์ ์๋ 0.1 ์ดํ์ ๋๋ค.
๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์น ๋ฐ์ดํ์ ์ธก์ ํ ์ ์์ต๋๋ค:
- Chrome ์ฌ์ฉ์ ๊ฒฝํ ๋ณด๊ณ ์(CrUX): ์ต๋ช ํ๋ Chrome ์ฌ์ฉ์ ๋ฐ์ดํฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์น์ฌ์ดํธ์ ๋ํ ์ค์ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- Lighthouse: ์น ํ์ด์ง์ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, SEO๋ฅผ ๊ฐ์ฌํ๋ ์๋ํ๋ ๋๊ตฌ์ ๋๋ค.
- ์น ๋ฐ์ดํ ํ์ฅ ํ๋ก๊ทธ๋จ: ์น์ ํ์ํ ๋ ์น ๋ฐ์ดํ ์งํ๋ฅผ ์ค์๊ฐ์ผ๋ก ํ์ํ๋ Chrome ํ์ฅ ํ๋ก๊ทธ๋จ์ ๋๋ค.
- PerformanceObserver API: ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ์น ๋ฐ์ดํ ๋ฐ์ดํฐ๋ฅผ ์บก์ฒํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
๋ค์์ Performance Timeline API๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ต์ ํํ ์ ์๋ ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก์ ๋๋ค:
- ๋๋ฆฌ๊ฒ ๋ก๋ฉ๋๋ ๋ฆฌ์์ค ์๋ณ: `resource` ํญ๋ชฉ ์ ํ์ ์ฌ์ฉํ์ฌ ๋ก๋ํ๋ ๋ฐ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ, ์คํ์ผ์ํธ๋ฅผ ์๋ณํฉ๋๋ค. ์ด๋ฌํ ๋ฆฌ์์ค๋ฅผ ์์ถํ๊ฑฐ๋, ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ฅผ ์ฌ์ฉํ๊ฑฐ๋, ์ง์ฐ ๋ก๋ฉํ์ฌ ์ต์ ํํฉ๋๋ค. ์๋ฅผ ๋ค์ด, Shopify, Magento ๋๋ WooCommerce์ ๊ฐ์ ๋ง์ ์ ์ ์๊ฑฐ๋ ํ๋ซํผ์ ์ ํ ํ๋งค๋ฅผ ์ํด ์ด๋ฏธ์ง์ ์์กดํฉ๋๋ค. ์ฑ๋ฅ ํ์๋ผ์ธ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง ๋ก๋ฉ์ ์ต์ ํํ๋ฉด ํนํ ๋ชจ๋ฐ์ผ ์ฌ์ฉ์์ ๊ณ ๊ฐ ๊ฒฝํ์ด ํฅ์๋ฉ๋๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ์๊ฐ ์ธก์ : `mark` ๋ฐ `measure` ํญ๋ชฉ ์ ํ์ ์ฌ์ฉํ์ฌ ํน์ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๊ฐ ์คํ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ๋๋ฆฌ๊ฒ ์คํ๋๋ ํจ์๋ฅผ ์๋ณํ๊ณ ๋ ํจ์จ์ ์ธ ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉํ๊ฑฐ๋, ๊ฒฐ๊ณผ๋ฅผ ์บ์ฑํ๊ฑฐ๋, ์คํ์ ๋์ค์ผ๋ก ์ฐ๊ธฐํ์ฌ ์ต์ ํํฉ๋๋ค.
- ๊ธด ์์ ๊ฐ์ง: `longtask` ํญ๋ชฉ ์ ํ์ ์ฌ์ฉํ์ฌ ์ฅ์๊ฐ ๋์ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ๋ ์์ ์ ์๋ณํฉ๋๋ค. ์ด๋ฌํ ์์ ์ ๋ ์์ ๋ฉ์ด๋ฆฌ๋ก ๋๋๊ฑฐ๋ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ค๋ ๋๋ก ์ด๋ํ์ฌ UI ๋ฒ๋ฒ ๊ฑฐ๋ฆผ์ ๋ฐฉ์งํฉ๋๋ค.
- ์ต์ด ์ฝํ ์ธ ํ ํ์ธํธ(FCP) ๋ฐ ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(LCP) ๋ชจ๋ํฐ๋ง: `paint` ๋ฐ `largest-contentful-paint` ํญ๋ชฉ ์ ํ์ ์ฌ์ฉํ์ฌ ์ฒซ ์ฝํ ์ธ ์ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ๊ฐ ํ๋ฉด์ ๋ํ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋ชจ๋ํฐ๋งํฉ๋๋ค. ์ค์ ๋ ๋๋ง ๊ฒฝ๋ก๋ฅผ ์ต์ ํํ์ฌ ์ด๋ฌํ ์งํ๋ฅผ ๊ฐ์ ํฉ๋๋ค.
- ๋์ ๋ ์ด์์ ์ด๋(CLS) ๋ถ์: `layout-shift` ํญ๋ชฉ ์ ํ์ ์ฌ์ฉํ์ฌ ์๊ธฐ์น ์์ ๋ ์ด์์ ์ด๋์ ์ ๋ฐํ๋ ์์๋ฅผ ์๋ณํฉ๋๋ค. ์ด๋ฌํ ์์๋ฅผ ์ํ ๊ณต๊ฐ์ ์์ฝํ๊ฑฐ๋ `transform` ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ ์ด์์ ์ด๋์ ์ ๋ฐํ์ง ์๊ณ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํฉ๋๋ค.
๊ณ ๊ธ ๊ธฐ์
Performance Timeline API์ ๊ธฐ๋ณธ ์ฌํญ์ ํ์คํ ์ดํดํ๋ค๋ฉด, ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋์ฑ ์ต์ ํํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ๊ณ ๊ธ ๊ธฐ์ ์ ํ์ํ ์ ์์ต๋๋ค:
- ์ค์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง(RUM): ํ์ฅ์ ์ค์ ์ฌ์ฉ์๋ก๋ถํฐ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํ์ฌ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ํ ๋ ์ ํํ ๊ทธ๋ฆผ์ ์ป์ต๋๋ค. RUM ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ Performance Timeline API๋ฅผ ์ฌ์ฉํ์ฌ ์์ฒด ๋ง์ถค RUM ์๋ฃจ์ ์ ๊ตฌํํฉ๋๋ค. ์ด ๋ฐ์ดํฐ๋ ์ง์ญ๋ณ ์ฑ๋ฅ ์ฐจ์ด๋ฅผ ํ์ ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๋ฏธ๊ตญ์์ ํธ์คํ ๋๋ ์น์ฌ์ดํธ๋ ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ์ผ๋ก ์ธํด ์์์์์ ๋ก๋ฉ ์๊ฐ์ด ๋ ๋๋ฆด ์ ์์ต๋๋ค.
- ํฉ์ฑ ๋ชจ๋ํฐ๋ง: ํฉ์ฑ ๋ชจ๋ํฐ๋ง์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์๋ฎฌ๋ ์ด์ ํ๊ณ ํต์ ๋ ํ๊ฒฝ์์ ์ฑ๋ฅ์ ์ธก์ ํฉ๋๋ค. ์ด๋ ์ค์ ์ฌ์ฉ์์๊ฒ ์ํฅ์ ๋ฏธ์น๊ธฐ ์ ์ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ: ์ง์์ ํตํฉ/์ง์์ ๋ฐฐํฌ(CI/CD) ํ์ดํ๋ผ์ธ์ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ํตํฉํ์ฌ ์ฑ๋ฅ ์ ํ๋ฅผ ์๋์ผ๋ก ๊ฐ์งํฉ๋๋ค. Lighthouse CI์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ด ํ๋ก์ธ์ค๋ฅผ ์๋ํํ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ ์์ฐ ์ค์ : ํ์ด์ง ๋ก๋ ์๊ฐ, ๋ฆฌ์์ค ํฌ๊ธฐ, ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ์๊ฐ๊ณผ ๊ฐ์ ์ฃผ์ ์งํ์ ๋ํ ์ฑ๋ฅ ์์ฐ์ ์ค์ ํฉ๋๋ค. ์๋ํ๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ์์ฐ์ ๋ชจ๋ํฐ๋งํ๊ณ ์ด๊ณผ ์ ์๋ฆผ์ ๋ฐ์ต๋๋ค.
ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ
Performance Timeline API๋ Chrome, Firefox, Safari, Edge๋ฅผ ํฌํจํ ์ต์ ์น ๋ธ๋ผ์ฐ์ ์์ ๋๋ฆฌ ์ง์๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ธ๋ผ์ฐ์ ๋ง๋ค API์ ๊ตฌํ ๋ฐ ๋์์ ์ฝ๊ฐ์ ์ฐจ์ด๊ฐ ์์ ์ ์์ต๋๋ค.
ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ๋ณด์ฅํ๋ ค๋ฉด ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์์ ์ฝ๋๋ฅผ ํ ์คํธํ๊ณ , API๊ฐ ์ง์๋์ง ์๋ ๊ฒฝ์ฐ ๊ธฐ๋ฅ ๊ฐ์ง๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ๋ฅ์ ์ ์์ ์ผ๋ก ์ ํ์ํค๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. `modernizr`์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๊ธฐ๋ฅ ๊ฐ์ง์ ๋์์ด ๋ ์ ์์ต๋๋ค.
๋ชจ๋ฒ ์ฌ๋ก
Performance Timeline API ์ฌ์ฉ์ ์ํ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ค์๊ฐ ๋ชจ๋ํฐ๋ง์๋ Performance Observer๋ฅผ ์ฌ์ฉํ์ธ์: Performance Observer๋ ํ์๋ผ์ธ์ ๋ฐ๋ณต์ ์ผ๋ก ํด๋งํ๋ ๊ฒ๋ณด๋ค ๋ ํจ์จ์ ์ธ ์ฑ๋ฅ ๋ฐ์ดํฐ ์์ง ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
- ์ฑ๋ฅ ๋ฐ์ดํฐ ์์ง์ด ์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ์ ์ ์ํ์ธ์: ๋๋ฌด ๋ง์ ๋ฐ์ดํฐ๋ฅผ ์์งํ๋ฉด ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ถ์ ์ ์ธ ์ํฅ์ ์ค ์ ์์ต๋๋ค. ํ์ํ ๋ฐ์ดํฐ๋ง ์์งํ๊ณ Performance Observer ์ฝ๋ฐฑ ํจ์์์ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ์ํํ์ง ๋ง์ญ์์ค.
- ๋งํฌ์ ์ธก์ ๊ฐ์ ์๋ฏธ ์๋ ์ด๋ฆ์ ์ฌ์ฉํ์ธ์: ์ด๋ ๊ฒ ํ๋ฉด ๋ฐ์ดํฐ๋ฅผ ๋ถ์ํ๊ณ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ธฐ๊ฐ ๋ ์ฌ์์ง๋๋ค.
- ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์์ ์ฝ๋๋ฅผ ํ ์คํธํ์ธ์: ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์์ ์ฝ๋๋ฅผ ํ ์คํธํ๊ณ ๊ธฐ๋ฅ ๊ฐ์ง๋ฅผ ์ฌ์ฉํ์ฌ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ๋ณด์ฅํฉ๋๋ค.
- ๋ค๋ฅธ ์ต์ ํ ๊ธฐ์ ๊ณผ ๊ฒฐํฉํ์ธ์: Performance Timeline API๋ ๋ฌธ์ ๋ฅผ ์ธก์ ํ๊ณ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์ ์ฒด์ ์ธ ์ฑ๋ฅ ๊ฐ์ ์ ์ํด ๊ธฐ์กด์ ์น ์ต์ ํ ๋ชจ๋ฒ ์ฌ๋ก(์ด๋ฏธ์ง ์ต์ ํ, ์ถ์, CDN ์ฌ์ฉ ๋ฑ)์ ํจ๊ป ์ฌ์ฉํ์ธ์.
๊ฒฐ๋ก
Performance Timeline API๋ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ธก์ ํ๊ณ ๋ถ์ํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. API์ ์ฃผ์ ๊ฐ๋ ๊ณผ ์ธํฐํ์ด์ค๋ฅผ ์ดํดํจ์ผ๋ก์จ ๊ฐ์น ์๋ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๊ณ ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์ต์ ํ๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค. ์น ๋ฐ์ดํ์ ์ง์คํ๊ณ RUM ๋ฐ ์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ์ ๊ฐ์ ๊ณ ๊ธ ๊ธฐ์ ์ ๊ตฌํํจ์ผ๋ก์จ ๋ ๋น ๋ฅด๊ณ , ๋ ๋ถ๋๋ฝ๊ณ , ๋ ์ฆ๊ฑฐ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค. Performance Timeline API๋ฅผ ์์ฉํ๊ณ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ์ฑ๋ฅ ๋ถ์์ ํตํฉํ๋ฉด ์ค๋๋ ์ ์ฑ๋ฅ ์ค์ฌ ์น ํ๊ฒฝ์์ ์น์ฌ์ดํธ์ ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๋ง์กฑ๋๊ฐ ํฌ๊ฒ ํฅ์๋ ๊ฒ์ ๋๋ค.